<template>
  <el-scrollbar class="discuss-detail" :delay="1000">
    <n-spin :show="show" style="--n-opacity-spinning: 0">
      <div class="detail">
        <div class="center">
          <div class="header">
            <n-button quaternary size="tiny" @click="noDetail">
              <template #icon>
                <i class="iconfont icon-jiantou_xiangzuo_o"></i>
              </template>
              全部题解
            </n-button>
          </div>
          <div class="detail-left">
            <div class="discuss">
              <div class="discuss-h">
                <div class="head">
                  <span class="title">{{ detail.title }}</span>
                  <div class="info">
                    <n-avatar round v-if="detail.avatar === '' || detail.avatar === null">{{ detail.author }}</n-avatar>
                    <n-avatar round :src="$getAvatarUrl(detail.avatar)" v-else />
                    <div class="user">
                      <div class="author">
                        <span>{{ detail.author }}</span>
                      </div>
                      <div class="base">
                        <div class="foot-info">
                          <i class="iconfont icon-chakan"></i>
                          <span>{{ detail.viewNum }}</span>
                        </div>
                        <div class="time">
                          <div class="icon">
                            <i class="iconfont icon-shijian" style="font-size: 14px"></i>
                            <span class="icon-num">发布时间:</span>
                            <n-popover trigger="hover">
                              <template #trigger>
                                <span class="icon-num time">{{
                                  postTime
                                }}</span>
                              </template>
                              <span class="create-time">{{ createTime }}</span>
                            </n-popover>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tags">
                    <el-tag v-for="tag in detail.tags" :key="tag" class="mx-1" :disable-transitions="false">
                      <span class="tag">{{ tag.name }}</span>
                    </el-tag>
                  </div>
                </div>
                <div class="content">
                  <markdown-vue ref="markdown" class="markdown" :detailContent="detail.content" :mode="'preview'"
                    :height="'100%'"></markdown-vue>
                </div>
                <div class="foot">
                  <div class="foot-info isI" @click="isLike" :class="{ likely: detail.isLike }">
                    <i class="iconfont icon-dianzan"></i>
                    <span>{{ detail.likeNum }}</span>
                  </div>
                  <div class="foot-info classic">
                    <n-popover trigger="hover" placement="right" @click="showReport()">
                      <template #trigger> ... </template>
                      <span class="report">举报</span>
                    </n-popover>
                  </div>
                  <div class="reply">
                    <n-button type="primary" @click="replyBody" size="tiny">
                      <template #icon>
                        <i class="iconfont icon-fabu-copy1-copy"></i>
                      </template>
                      回复讨论
                    </n-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-bottom">
            <div class="replay">
              <div class="replay-head">
                <div class="i">
                  <i class="iconfont icon-jurassic_bbs"></i>
                </div>
                <div class="replay-total">评论({{ total }})</div>
                <n-popselect v-model:value="typeValue" :options="replayType" trigger="click">
                  <n-button icon-placement="right">
                    <template #icon>
                      <i class="iconfont icon-huhuan"></i>
                    </template>
                    {{ typeValue }}
                  </n-button>
                </n-popselect>
              </div>
              <div class="replay-all">
                <replay-vue v-for="(item, index) in replayContent" :key="index" :replayDetail="item"
                  @getReplay="getReplay"></replay-vue>
              </div>
              <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" :hide-on-single-page="true"
                  @current-change="changePage">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-spin>
    <el-drawer v-model="reply" :size="'50vh'" :show-close="false" :modal="false" :direction="'btt'">
      <template #header style="margin-bottom: 0px">
        <div class="head">
          <div class="button">
            <div>
              <n-button type="info" size="small" @click="closeReply">
                取消
              </n-button>
            </div>
            <div>
              <n-button type="primary" size="small" @click="RepalyTime">
                <template #icon>
                  <i class="iconfont icon-fabu"></i>
                </template>
                发布回复
              </n-button>
            </div>
          </div>
        </div>
      </template>
      <div class="markdown">
        <markdown-vue ref="replay" :height="'310px'"></markdown-vue>
      </div>
    </el-drawer>
    <el-dialog v-model="isReport" title="举报" width="35%">
      <div class="center">
        <el-radio-group v-model="reportType">
          <el-radio-button label="骚扰广告" />
          <el-radio-button label="黄色内容" />
          <el-radio-button label="暴力内容" />
          <el-radio-button label="恐怖言论" />
          <el-radio-button label="政治言论" />
          <el-radio-button label="造谣传谣" />
          <el-radio-button label="违法内容" />
          <el-radio-button label="其它" />
        </el-radio-group>
        <div class="content" v-show="isOther">
          <n-input v-model:value="reportContent" type="textarea" placeholder="其它" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isReport = false">取消</el-button>
          <el-button :disabled="reportContent === ''" type="primary" @click="report()">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import replayVue from "./preplay.vue";
import markdownVue from "@/components/ojComponents/markdown/markdown.vue";

import {
  getDiscussDetail,
  updateDiscussLikeAPI,
  addReplayAPI,
  getReplayAPI,
  reportDiscussAPI,
} from "@/api/ojAPI/ojAPI";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      detail: {},
      show: false,
      reply: false,
      replayContent: [],
      replayType: [
        {
          label: "热门",
          value: "热门",
        },
        {
          label: "最新",
          value: "最新",
        },
      ],
      typeValue: "热门",
      pageNum: 1,
      total: 0,
      page: 1,
      addReplayTime: null,
      type: "edit",
      isReport: false,
      reportContent: "",
      reportType: "",
      isOther: false,
      deboundTime: null,
    };
  },
  components: {
    markdownVue,
    replayVue,
  },
  watch: {
    reportType(newValue) {
      if (newValue === "其它") {
        this.reportContent = "";
        this.isOther = true;
      } else {
        this.reportContent = newValue;
      }
    },
  },
  mounted() {
    this.show = true;
    this.getDiscussDetail();
    this.getReplay();
  },

  methods: {
    //展示举报界面
    showReport() {
      if (this.$store.oj.isLogin) {
        this.isReport = true;
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    //返回全部题解
    noDetail() {
      this.$emit("changeDetail");
    },
    //回复界面
    replyBody() {
      if (this.$store.oj.isLogin) {
        this.reply = true;
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    //关闭回复界面
    closeReply() {
      this.reply = false;
    },
    //重新获取评论
    reReplay() {
      this.getReplay();
    },
    //当页码改变的时候获取评论
    changePage(page) {
      this.pageNum = page;
      this.getReplay();
      document.querySelector(".detail-left").scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    },
    //获取讨论详细信息
    async getDiscussDetail() {
      const discussId = localStorage.getItem("discussId");
      await getDiscussDetail(discussId)
        .then((res) => {
          if (res.data.code === 200) {
            if (!res.data.data.isLike) {
              res.data.data["isLike"] = false;
            }
            this.detail = res.data.data;
            this.$refs.markdown.content = res.data.data.content;
          } else {
            ElMessage.error("获取讨论详细信息失败");
          }
          this.show = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    report() {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.reportAPI();
      }, 300);
    },
    //举报讨论
    async reportAPI() {
      if (this.$store.oj.isLogin) {
        let data = new FormData();
        data.append("targetId", this.detail.id);
        data.append("type", 0);
        data.append("content", this.reportContent);
        await reportDiscussAPI(data).then((res) => {
          if (res.data.code === 200) {
            ElMessage.warning("举报成功");
            this.isReport = false;
            this.reportContent = "";
            this.reportType = "";
            this.isOther = false;
          }
        });
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    //点赞或者取消点赞的按钮
    //并发请求改变状态
    async isLike() {
      if (this.$store.oj.isLogin) {
        this.detail.isLike = !this.detail.isLike;
        if (this.detail.isLike) {
          this.detail.likeNum += 1;
        } else {
          this.detail.likeNum -= 1;
        }
        let data = new FormData();
        data.append("isLike", this.detail.isLike);
        data.append("discussionId", this.detail.id);
        await updateDiscussLikeAPI(data)
          .then((res) => {
            if (res.data.code === 200) {
            } else {
              ElMessage.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        ElMessage.error("请登录");
      }
    },
    //对发布评论的时候进行防抖
    RepalyTime() {
      if (this.addReplayTime) {
        clearTimeout(this.addReplayTime);
      }
      this.addReplayTime = setTimeout(() => {
        this.addReplay();
      }, 300);
    },
    //添加评论
    async addReplay() {
      if (this.$refs.replay.content === "") {
        ElMessage.error("请输入内容");
        return;
      }
      const data = {
        content: this.$refs.replay.content,
        discussionId: this.detail.id,
      };
      await addReplayAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.closeReply();
          this.$refs.replay.clearContent();
        }
      });
      this.getReplay();
    },
    //获取所有的评论
    async getReplay() {
      const data = {
        pageNum: this.pageNum,
        discussionId: localStorage.getItem("discussId"),
      };
      await getReplayAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.replayContent = res.data.data.records;
          this.total = parseInt(res.data.data.total);
        }
      });
    },
  },
  computed: {
    createTime() {
      //将后端传给的时间进行转换
      //使用时间对象进行转换
      const date = new Date(this.detail.createTime);
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds()
      );
    },
    postTime() {
      const nowTime = new Date();
      const discussTime = new Date(this.detail.createTime);
      const differTime = new Date(nowTime.getTime() - discussTime.getTime());
      if (differTime.getFullYear() !== 1970) {
        if (parseInt(differTime.getFullYear()) - 1970 >= 100) {
          return (parseInt(differTime.getFullYear()) - 1970) / 100 + "世纪前";
        } else {
          return parseInt(differTime.getFullYear()) - 1970 + "年前";
        }
      } else if (nowTime.getMonth() !== discussTime.getMonth()) {
        return differTime.getMonth() + "月前";
      } else if (differTime.getDate() - 1 !== 0) {
        return differTime.getDate() - 1 + "天前";
      } else if (nowTime.getHours() - discussTime.getHours() !== 0) {
        return nowTime.getHours() - discussTime.getHours() + "小时前";
      } else if (differTime.getMinutes() !== 0) {
        return differTime.getMinutes() + "分钟前";
      } else if (differTime.getSeconds() !== 0) {
        return differTime.getSeconds() + "秒前";
      } else {
        return "刚刚发布";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.discuss-detail {
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  min-width: 440px !important;
  height: 100%;

  .n-spin {
    --n-opacity-spinning: 0;
  }

  .detail {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;

    .center {
      flex-direction: column;
      min-width: 0;
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;

      .header {
        padding-right: 0.25rem;
        padding-left: 0.5rem;
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        border-bottom-width: 1px;
        height: 1.7rem;
        display: flex;
        align-items: center;

        .n-button {
          --n-color-hover: none;
          --n-color-pressed: none;
          --n-color-focus: none !important;
          color: #0000008c;
          font-size: 0.875rem;
          line-height: 1.25rem;
          gap: 0.5rem;
          align-items: center;
        }

        .n-button:hover {
          color: rgb(17, 17, 17);
        }
      }

      .detail-left {
        background: rgba(255, 255, 255, 1);
        flex: 1 1 0%;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        max-width: 732px;
        margin: 0 auto;

        .discuss {
          max-width: 732px;
          width: 100%;
          padding: 8px 0;
          position: relative;
          margin-left: auto;
          margin-right: auto;

          .discuss-h {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            gap: 1rem;
          }

          .head {
            width: 100%;
            display: flex;
            gap: 0.75rem;
            flex-direction: column;
            min-width: 0;

            .img {
              display: flex;
              border-radius: 50%;
              text-decoration-line: none;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              min-width: 32px;
              width: 2rem;
              min-height: 32px;
              height: 2rem;
              background-color: initial;
              color: inherit;
            }

            .user {
              display: flex;
              flex-direction: column;
              gap: 0.125rem;

              .author {
                color: #1a1a1a;
                display: flex;
                align-items: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                gap: 0.25rem;
                max-width: 200px;
                font-weight: 400;
                font-size: 0.875rem;
                line-height: 1.25rem;
              }

              .base {
                gap: 0.75rem;
                align-items: center;
                display: flex;

                .icon {
                  display: flex;
                  color: rgba(191, 191, 191, 1);
                  align-items: center;
                  gap: 0.375rem;

                  i {
                    width: 1rem;
                    height: 1.25rem;
                  }

                  .icon-num {
                    font-size: 0.75rem;
                    line-height: 1rem;
                  }

                  a {
                    text-decoration: none;
                    background-color: transparent;
                    outline: 0;
                    cursor: pointer;
                    transition: color 0.2s ease;
                  }

                  a:hover {
                    color: #18a058;
                  }

                  .time {
                    cursor: default;
                  }

                  .time:hover {
                    color: #18a058;
                  }
                }

                .foot-info {
                  display: flex;
                  color: rgba(191, 191, 191, 1);
                  align-items: center;
                  gap: 0.375rem;

                  i {
                    width: 1rem;
                    height: 1.55rem;
                  }

                  span {
                    font-size: 0.75rem;
                    line-height: 1rem;
                  }
                }
              }
            }

            .title {
              margin-right: 12px;
              font-size: 1rem;
              line-height: 1.5rem;
              color: rgb(26 26 26/1);
              font-weight: 600;
            }

            .info {
              gap: 1rem;
              align-items: center;
              display: flex;
            }

            .tags {
              .mx-1 {
                margin-right: 10px;
                user-select: none;
                font-size: 12px;
                line-height: 20px;
                display: inline-flex;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: center;
                justify-content: center;
                text-decoration: none;
                transition-property: color, background-color;
                transition-duration: 0.3s;
                white-space: nowrap;
                color: rgba(38, 38, 38, 1);
                background-color: rgba(0, 10, 32, 0.05);
                padding: 0px 6px;
                min-width: 40px;
                border-radius: 10px;
                --el-tag-border-color: rgba(0, 10, 32, 0.05);
              }
            }

            .doing {
              margin-left: auto;
              flex-shrink: 0;
              padding-top: 6px;

              .n-button {
                border-radius: 8px;
                margin-right: 10px;
                background-color: rgba(255, 255, 255, 0.75);
              }

              .like {
                color: #18a058;
                transition: color 0.7s ease;
              }

              .tip-off {
                color: #d03050;
              }
            }
          }

          .content {
            width: 100%;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
          }

          .foot {
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            border-top: 1px solid rgba(0, 10, 32, 0.11);
            position: sticky;
            margin: 0px -20px;
            padding: 7px 16px 5px 16px;
            bottom: -5px;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 0px 0px 8px 8px;

            .foot-info {
              padding: 0px 10px;
              color: rgba(104, 103, 103, 0.9);
              font-size: 1.1em;

              i {
                margin-right: 7px;
                font-size: 1.25em;
              }
            }

            .likely {
              color: rgba(45, 181, 93, 1);
              --n-border: 1px solid rgba(45, 181, 93, 1) !important;
              --n-border-hover: 1px solid rgba(45, 181, 93, 1) !important;
              --n-border-pressed: 1px solid rgba(45, 181, 93, 1) !important;
              --n-border-focus: 1px solid rgba(45, 181, 93, 1) !important;

              i {
                animation: change 1s;
                color: rgba(61, 225, 118, 0.868);
                background-color: rgba(198, 254, 197, 0.419);
                border-radius: 50%;
              }

              @keyframes change {
                0% {
                  opacity: 0.75;
                }

                10% {
                  opacity: 0.5;
                }

                20% {
                  opacity: 0.25;
                }

                30% {
                  opacity: 0;
                }

                50% {
                  opacity: 0.25;
                }

                75% {
                  opacity: 0.75;
                }

                100% {
                  opacity: 1;
                }
              }
            }

            .isI:hover {
              cursor: pointer;
              color: #18a058;

              i {
                background-color: rgba(198, 254, 197, 0.419);
                border-radius: 50%;
                color: #18a058;
              }
            }

            .classic:hover {
              color: #18a058;
              cursor: pointer;
            }

            .reply {
              margin-left: auto;

              .n-button {
                border-radius: 10px;
              }
            }
          }
        }
      }

      .detail-bottom {
        .replay {
          display: flex;
          padding-left: 1rem;
          padding-right: 1rem;
          flex-direction: column;
          height: 100%;
          width: 100%;
          margin: 0 auto;
          max-width: 732px;
          min-width: 440px !important;

          .replay-head {
            display: flex;
            align-items: center;

            .i {
              .iconfont {
                overflow: hidden;
                color: rgb(140, 140, 140);
                display: block;
                font-size: 1.5rem;
              }
            }

            .r-content {
              margin-top: 0.75rem;

              .relative {
                position: relative;

                .flex {
                  width: 100%;
                  display: flex;
                  flex-direction: column;

                  .box-content {
                    padding: 1rem;
                    align-items: flex-end;
                  }
                }
              }
            }

            .replay-total {
              --tw-space-x-reverse: 0;
              margin-left: 0.75rem;
              font-size: 12px;
              color: rgb(38 38 38 /1);
              font-weight: 500;
              font-size: 1rem;
              line-height: 1.5rem;
              flex: 1 1 0%;
            }

            ::v-deep(.n-button) {
              border: none;
              border-radius: 3px;
              line-height: 20px;
              outline: none;
              user-select: none;
              text-decoration: none;
              display: inline-flex;
              -webkit-box-align: center;
              align-items: center;
              -webkit-box-pack: center;
              justify-content: center;
              transition-property: color, box-shadow, background-color, opacity;
              transition-duration: 0.3s;
              overflow: hidden;
              cursor: pointer;
              opacity: 1;
              background-color: transparent;
              font-size: 12px;
              padding: 0px;
              color: rgba(140, 140, 140, 1);
              --n-border: none !important;
              --n-border-hover: none !important;
              --n-border-pressed: none !important;
              --n-border-focus: none !important;
              --n-border-disabled: none !important;
              --n-text-color-pressed: rgb(51, 54, 57) !important;
              --n-text-color-focus: rgb(51, 54, 57) !important;
            }

            ::v-deep(.n-base-wave) {
              animation-iteration-count: 0;
            }
          }

          .replay-all {
            width: 100%;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

.el-drawer {
  .head {
    display: flex;

    .button {
      margin-left: auto;
      display: flex;

      .n-button {
        margin-right: 10px;
      }
    }
  }
}

::v-deep(.el-drawer__header) {
  padding-top: 15px;
  margin-bottom: 0px;
}

::v-deep(.el-drawer__body) {
  padding: 5px 20px 5px 20px;
}

::v-deep(.el-dialog) {
  border-radius: 10px;
  min-width: 420px;

  .center {
    font-size: 0.75rem;
    line-height: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .content {
      border-color: #0000;
      outline: 2px solid #0000;
      color: rgb(38 38 38/1);
      font-size: 0.875rem;
      line-height: 1.25rem;
      border-color: #0000;
      border-width: 1px;
      border-radius: 0.5rem;
    }
  }
}

::v-deep(.n-input) {
  margin-top: 16px;
  padding: 0;
  --n-border-hover: none !important;
  --n-border-focus: none !important;
  --n-box-shadow-focus: none !important;
  --n-border: none !important;
}

::v-deep(.n-input-wrapper) {
  background-color: #000a2008;
  height: 90px;
  padding: 0.5rem 0.75rem;
}

::v-deep(.el-dialog__body) {
  padding: 0 !important;
}

::v-deep(.el-radio-button__inner) {
  border-left: none !important;
  border: none;
  color: #262626bf;
  padding: 0.5rem;
  border-radius: 0.5rem !important;
  flex-direction: column;
  cursor: pointer;
  display: flex;
  background-color: #01020508;
  --el-radio-button-checked-bg-color: #007aff14 !important;
  --el-radio-button-checked-text-color: rgb(0 122 255/1);
  box-shadow: none !important;
}

::v-deep(.el-radio-group) {
  gap: 1rem;
  flex-wrap: wrap;
  display: flex;
}

::v-deep(.github-markdown-body) {
  padding: 0;
}

.report {
  cursor: pointer;
}

.report:hover {
  color: #18a058;
}
</style>
